<script setup lang="ts">
import { watch } from 'vue'
import * as echarts from 'echarts/core'
import { useEcharts } from './echarts.ts'
import { api_getHomeBaseInfo, api_getWeatherChartData } from '~@/api/common/home.module'

// defineOptions({
//   name: 'LineChart',
// })

const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] as string[],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '室外温度',
      type: 'bar',
      data: [],
      smooth: true,
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: '#33F6FE' },
            { offset: 1, color: '#0A86F6' },
          ],
        ),
      },
      emphasis: {
        focus: 'series',
      },
      data: [] as number[],
    },

    {
      name: '去年周期',
      type: 'bar',
      data: [[120, 90, 70], [200, 180, 130], [150, 130, 110], [80, 60, 50], [70, 50, 40], [110, 90, 80]],
      smooth: true,
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: '#FCF2B2' },
            { offset: 1, color: '#F79512' },
          ],
        ),
      },
      emphasis: {
        focus: 'series',
      },
      data: [] as number[],
    },
    {
      name: '实际负荷',
      type: 'bar',
      data: [[120, 90, 70], [200, 180, 130], [150, 130, 110], [80, 60, 50], [70, 50, 40], [110, 90, 80]],
      smooth: true,
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            { offset: 0, color: '#FCAA5B' },
            { offset: 1, color: '#E05E78' },
          ],
        ),
      },
      emphasis: {
        focus: 'series',
      },
      data: [] as number[],
    },
    {
      color: '#FF8C8C',
      name: '预测负荷',
      type: 'line',
      smooth: true,
      stack: 'Total',
      emphasis: {
        focus: 'series',
      },
      data: [],
    },
  ],
}))

async function mockData() {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000)
  })

  updateOptions((opts) => {
    opts.xAxis.data = ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
    opts.series[0].data = [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
    opts.series[1].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
    opts.series[2].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]
    opts.series[3].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]

    return opts
  })
}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory()
    opts.legend.data = originOpts.legend.data
    opts.series[0].name = originOpts.series[0].name
    opts.series[1].name = originOpts.series[1].name

    return opts
  })
}

async function init() {
  mockData()
}

init()
</script>

<template>
  <div ref="domRef" class="h-280px overflow-hidden" />
</template>

<style scoped>
div {
  /* border: 1px solid red; */
  position: relative;
  top: -35px;
}
</style>
